@function px2rem ($px) {
  @return ($px / 72) * 1rem
}

@function px2rem640 ($px) {
  @return ($px / 64) * 1rem
}

@mixin px2rem ($property, $px-values, $baseline-px:16px) {
  $baseline-rem: $baseline-px / 1rem * 1;

  @if type-of($px-values) == "number" {

  }

  @else {
    $rem-values:();
    @each $value in $px-values {
      @if $value == 0 or type-of($value) != "number"{
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }
  }
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;
  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }
  @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
  @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }
  @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}


@mixin setBoxBg ($width,$height,$bgImg) {
  display: block;
  width: px2rem($width);
  height: px2rem($height);
  background: url($bgImg) no-repeat 0 0;
  background-size:contain;
}
